<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				text-align: center;
			}
			#wrap > img{
				width: 64px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<img src="images/1.png"/>
			<img src="images/2.png"/>
			<img src="images/3.png"/>
			<img src="images/4.png"/>
			<img src="images/5.png"/>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var r = 320;
			var imgNodes = document.querySelectorAll("#wrap > img");
			
			document.onmousemove=function(ev){
				ev =  ev||event;
				for(var i=0;i<imgNodes.length;i++){
					var a = imgNodes[i].getBoundingClientRect().left + imgNodes[i].offsetWidth/2 - ev.clientX;
					var b = imgNodes[i].getBoundingClientRect().top + imgNodes[i].offsetHeight/2 - ev.clientY;
					var c = Math.sqrt(a*a+b*b);
					
					
					if(c>=r){
						c=r;
					}
					imgNodes[i].style.width =128 - c*0.2 +"px";
				}
			}
		}
		
		
	</script>
</html>
